<template>
  <div class="content">
    <el-collapse v-model="activeNames">
      <el-collapse-item v-for="(val,index) in yearOrder" :key="index" :title="val" :name="val">
        <NewsCard 
          v-for="(i,index) in news[val]" :key="index" 
          :title    = "i.title" 
          :create_date     = "i.create_date" 
          :synopsis = "i.synopsis"
          :imgUrl   = "i.imgUrl" 
        />
      </el-collapse-item>
    </el-collapse>
    
  </div>
</template>

<script>
import NewsCard from './NewsCard.vue'


export default {
  components: { NewsCard },
  data() {
    return {
      activeNames: [],
      yearOrder: [],
      news: [],
    };
  },
  created() {
    this.$http.get('/json/HomeNews.json').then((response) => {
      // console.log(response);
      this.activeNames = response.data.activeNames;
      this.yearOrder = response.data.yearOrder;
      this.news = response.data.news;

    });

  }

};
</script>

<style lang="less" scoped>
@import "../el-collapse-item.less";
</style>
